<template>
  <el-dialog
    title="详情"
    v-model="visible"
    width="800px"
    @close="visible = false"
    :close-on-click-modal="false"
  >
    <div class="main">
      <el-table :show-header="false" v-loading="loading" size="default" :data="dataList">
        <el-table-column align="center" prop="couponName" />
        <el-table-column align="center" prop="createTime" />
      </el-table>
      <div style="margin-right: 10px">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getRewardApi } from '@/api/marketing/invitation'

const total = ref(0)
const dataList = ref([])
const visible = ref(false)
const loading = ref(true)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  clientId: '',
  marActivityId: ''
})

function init(clientId, marActivityId) {
  visible.value = true
  queryParams.clientId = clientId
  queryParams.marActivityId = marActivityId
  getList()
}

function getList() {
  loading.value = true
  getRewardApi(queryParams)
    .then((res) => {
      loading.value = false
      dataList.value = res?.data?.rows || []
      total.value = res?.data?.total || 0
    })
    .catch(() => {
      loading.value = false
      dataList.value = []
      total.value = 0
    })
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
:deep(.pagination-container .el-pagination) {
  right: 20px;
}
.main {
  position: relative;
  transform: translate3d(0, -30px, 0);
}
.type {
  margin-bottom: 20px;
}
</style>
